import React,{ Component } from "react"
import {Link} from "react-router-dom"
import {connect} from "react-redux"
import cartimg from "../../images/cars.png";
import Tipdialog from "../../components/tipdialog";
import "./index.css"

import {
       getCartData,
       delCartItem,
       checkCartItem,
       addItemNum,
       subItemNum,
       allcheckItem,
       delCartByQuery
} from "../../store/action/cartAction"

import {
  addOrderItem
} from "../../store/action/orderAction"


function Nodata(){
	return  (   
		        <div className="nodata">
                    <div className="img">
                        <img src={cartimg} alt=""/>
                    </div>
                    <p className="name">购物车空了...T.T</p>
                    <p className="title">去添加点什么吧</p>
                    <Link to="/">去逛逛</Link>
                </div>
            )
}


class Index extends Component{
	constructor(props){
		super(props);
		this.state = {
         onoff:false,
         isShow:false,
         msg:""
		}
	}
  
  
  delItem(id){
     this.props.delCartItem(id)
  }

  checkItem(id){
    this.props.checkCartItem(id)
  }

  addNum(id){
    this.props.addItemNum(id)
  }
  
  subNum(id){
    this.props.subItemNum(id)
  }

  allCheck(){
    this.props.allcheckItem()
  }

  delCartBy(){  //删除选中商品
      let list = this.props.cartReducer.filter(item=>{
         return item.isCheck
      })
      if(list.length===0){
          this.setState({
            isShow:true,
            msg:"请选择要删除的商品"
          })
          return false;
      } 
      this.props.delCartByQuery()
  }
  
  placeOrder(){
    let list = this.props.cartReducer.filter(item=>{
      return item.isCheck
    })
    if(list.length===0){
       this.setState({
         isShow:true,
         msg:"请选择商品再下单"
       })
       return false;
    }

    this.props.cartReducer.filter(item=>item.isCheck)
    .forEach(item=>{
       this.props.addOrderItem({
          id:item.id,
          img:item.img,
          num:item.num,
          price:item.price,
          name:item.name
       })
    })
    this.props.history.push("/confirmorder") 
  }



  
  closeDialog(){
    this.setState({
      isShow:false
    })
  }
  componentDidMount(){
     if(localStorage.getItem("userinfo")){
       this.props.getCartData(JSON.parse(localStorage.getItem("userinfo")).id)
     }
    
  }

	render(){
      let {onoff,isShow,msg} = this.state;
      return(
        <div className="cart">
                <ul>
                    {this.props.cartReducer.map(item=>{
                        return <li key={item.id} className={item.isCheck?"active":""}>
                                  <i onClick={this.checkItem.bind(this,item.id)}></i>
                                  <img src={item.img} alt=""/>
                                  <div className="info">
                                    <p className="name">{item.name}</p>
                                    <p className="price">￥{parseFloat(item.price).toFixed(2)}</p>
                                  </div>
                                  <span className="del" onClick={this.delItem.bind(this,item.id)}>删除</span>
                                  <p className="count">
                                     <span onClick={this.subNum.bind(this,item.id)}>-</span>
                                     <span className="num">{item.num}</span>
                                     <span onClick={this.addNum.bind(this,item.id)}>+</span>
                                  </p>
                               </li>
                    })}
                </ul>  

               {this.props.cartReducer.length!==0 ? 
                <div className="bot">
                    <span className="allcheck" onClick={this.allCheck.bind(this)}>
                      <i className={this.props.isAllCheck?"active":""}></i>全选
                    </span>
                    <span className="edit" onClick={()=>{this.setState({onoff:!onoff})}}>{onoff?"完成":"编辑"}</span>
                    <span className="total">￥{this.props.total.toFixed(2)}</span>
                    {
                      onoff?
                      <span className="alldel btn" onClick={this.delCartBy.bind(this)}>删除</span>
                     :<span className="pay btn" onClick={this.placeOrder.bind(this)}>下单</span>
                    }
                </div>:null}
               {this.props.cartReducer.length===0 ? <Nodata />:null}
               {isShow? <Tipdialog msg={msg} closeDialog={this.closeDialog.bind(this)}/>:null}
              
        </div>
		  )
	}
}



const mapStateToProps = state =>{
   return {
     cartReducer:state.cartReducer.list,
     total:state.cartReducer.total,
     isAllCheck:state.cartReducer.isAllCheck
   }
}


const mapDispatchToProps = dispatch =>{
   return {
      getCartData:function(id){
          dispatch(getCartData(id))
      },
      delCartItem:function(id){
          dispatch(delCartItem(id))
      },
      checkCartItem:function(id){
          dispatch(checkCartItem(id))
      },
      addItemNum:function(id){
          dispatch(addItemNum(id))
      },
      subItemNum:function(id){
          dispatch(subItemNum(id))
      },
      allcheckItem:function(){
        dispatch(allcheckItem())
      },
      delCartByQuery:function(){
        dispatch(delCartByQuery())
      },
      addOrderItem:function(data){
        dispatch(addOrderItem(data))
      }

   }
}

export default connect(mapStateToProps,mapDispatchToProps)(Index)